import { t } from 'i18next'
import React from 'react'
import { Tab } from '@kedacom/react-next'
import { IconDrawer, StyledWrap } from './style'
import { useEffect, useState } from 'react'
import { useMccStore } from '../../store'
import { useGlobalStore } from '@/store/global'
import shallow from 'zustand/shallow'
import { IMccOperation } from '@/api/personalConfig/interface'
import { useParamsStore } from '../main/store'
import {
	MenuAi,
	MenuBroadcast,
	MenuChairmanPoll,
	MenuDataMeeting,
	MenuDelayMeeting,
	MenuEndMeeting,
	MenuFileManage,
	MenuMeetingPoll,
	MenuMeetingVideo,
	MenuMix,
	MenuMonitor,
	MenuMsg,
	MenuMtAdd,
	MenuMtAddAll,
	MenuMtBatchDelete,
	MenuMtBatchOffline,
	MenuMtRecord,
	MenuMtSelect,
	MenuMtVmp,
	MenuMute,
	MenuNoItemTip,
	MenuRecall,
	MenuRollcall,
	MenuSettingMeeting,
	MenuSilence,
	MenuTvwall,
	MenuUpload,
	MenuVideoLive,
	MenuVip,
	MenuVmp,
	MenuVoiceInspire,
} from './item'
import Vip from '../vip'
import { SlideInOut } from './SlideInOut'
import CameraRc from '../cameraRc'
import Sms from '../sms'
import Chasing from '../chasing'
import Poll from '../poll'
import MccMtVideoView from '../mccMtVideo'
import Ai from '../ai'
import VoiceInspire from '../voiceInspire'
import PlayVideo from '../playVideo'
import LiveVideo from '../liveVideo'
import Mix from '../mix'
import MtSelect from '../select'
import Main from '@/components/AddMt/main'
import Tvwall from '../tvwall'
import MeetingInfoSet from '../meetingInfoSet'
import DelayMeeting from '../meetingInfoSet/delayMeeting'
import MccMtInfoView from '../mccMtInfo'
import Roll from '../roll'
import { useTableAllStore } from '../main/table/all/store'

interface IOPERATE {
	opt: keyof IMccOperation
	render: React.ReactNode
	show?: boolean
}

const OPERATE: IOPERATE[] = [
	{ opt: 'mt_add', render: <MenuMtAdd /> },
	{ opt: 'mt_add_all', render: <MenuMtAddAll /> },
	{ opt: 'vip', render: <MenuVip /> },
	{ opt: 'mute', render: <MenuMute /> },
	{ opt: 'silence', render: <MenuSilence /> },
	{ opt: 'mt_select', render: <MenuMtSelect /> },
	{ opt: 'vmp', render: <MenuVmp /> },
	{ opt: 'mtvmp', render: <MenuMtVmp /> },
	{ opt: 'mix', render: <MenuMix /> },
	{ opt: 'tvwall', render: <MenuTvwall /> },
	{ opt: 'meeting_poll', render: <MenuMeetingPoll /> },
	{ opt: 'chairman_poll', render: <MenuChairmanPoll /> },
	{ opt: 'rollcall', render: <MenuRollcall /> },
	{ opt: 'mt_batch_delete', render: <MenuMtBatchDelete /> },
	{ opt: 'video_live', render: <MenuVideoLive /> },
	{ opt: 'meeting_video', render: <MenuMeetingVideo /> },
	{ opt: 'mt_batch_offline', render: <MenuMtBatchOffline /> },
	{ opt: 'msg', render: <MenuMsg /> },
	{ opt: 'broadcast', render: <MenuBroadcast /> },
	{ opt: 'voice_inspire', render: <MenuVoiceInspire /> },
	{ opt: 'recall', render: <MenuRecall /> },
	{ opt: 'file_manage', render: <MenuFileManage /> },
	{ opt: 'upload', render: <MenuUpload /> },
	{ opt: 'mt_record', render: <MenuMtRecord /> },
	{ opt: 'data_meeting', render: <MenuDataMeeting /> },
	{ opt: 'monitor', render: <MenuMonitor /> },
	{ opt: 'ai', render: <MenuAi /> },
]
const SFU_OPERATE: IOPERATE[] = [
	{ opt: 'mt_add', render: <MenuMtAdd /> },
	{ opt: 'mt_add_all', render: <MenuMtAddAll /> },
	{ opt: 'mute', render: <MenuMute /> },
	{ opt: 'vmp', render: <MenuVmp /> },
	{ opt: 'tvwall', render: <MenuTvwall /> },
	{ opt: 'video_live', render: <MenuVideoLive /> },
	{ opt: 'file_manage', render: <MenuFileManage /> },
	{ opt: 'mt_record', render: <MenuMtRecord /> },
	{ opt: 'ai', render: <MenuAi /> },
]
function RightAction() {
	const [tab, setTab] = useState<'common' | 'especial'>('common')
	const [menu, setMenu] = useState<{ common: IOPERATE[]; especial: IOPERATE[] }>({
		common: [],
		especial: [],
	})
	const [loading, setLoading] = useState(true)
	const curPage = useMccStore((state) => state.curPage)
	const collapsed = useMccStore((state) => state.collapsed)
	const mccInfo = useMccStore((state) => state.mccInfo)

	const { user, serverInfo, SWITCH } = useGlobalStore(
		(state) => ({
			user: state.user,
			serverInfo: state.serverInfo,
			SWITCH: state.SWITCH,
		}),
		shallow
	)
	const tree = useTableAllStore((state) => state.tree)
	const meetingType = useMccStore((state) => state.mccInfo.meetingType)
	const isSfu = meetingType === 2 ? true : false
	const addSfuStyle = isSfu && (curPage === 'mcc_main' || curPage === 'tvwall') ? true : false
	useEffect(() => {
		if (user) {
			let common: IOPERATE[] = []
			let especial: IOPERATE[] = []
			if (meetingType === 2) {
				let _tmp = SFU_OPERATE
				for (const item of _tmp) {
					common.push(item)
				}
			} else {
				let _tmp = OPERATE
				for (const item of _tmp) {
					if (user.personal_config?.mcc_operate?.[item.opt]) {
						common.push(item)
					} else {
						especial.push(item)
					}
				}
			}

			common = showMenuItem(common)
			especial = showMenuItem(especial)
			setMenu({ common, especial })
			setLoading(false)
		}
	}, [user, meetingType, serverInfo, SWITCH, mccInfo])
	const handleCollapsed = () => {
		useMccStore.getState().update({ collapsed: !collapsed })
	}
	const showMenuItem = (common: IOPERATE[]) => {
		for (const item of common) {
			if (item.opt === 'mtvmp') {
				item.show = meetingType === 1
			} else if (item.opt === 'tvwall') {
				if (SWITCH.tvwall === 1) {
					item.show = true
				}
			} else if (item.opt === 'video_live') {
				if (user) {
					if (
						(!user.enable_live && !user.enable_video) ||
						(!SWITCH.vrs.video && !SWITCH.vrs.live) ||
						mccInfo.encryptionType === 4
					) {
						//无直播和录像权限 SM1加密
					} else if (user.enable_live && SWITCH.vrs.live && (!SWITCH.vrs.video || !user.enable_video)) {
						//有直播无录像权限
						item.show = true
					} else if ((!user.enable_live || !SWITCH.vrs.live) && SWITCH.vrs.video && user.enable_video) {
						item.show = true
					} else {
						item.show = true
					}
				}
			} else if (item.opt === 'meeting_video') {
				item.show = !!user?.enable_play && !!SWITCH.vrs.playVideo
			} else if (item.opt === 'upload') {
				item.show = tree.mtKey !== '0.0.0.0_0'
			} else if (item.opt === 'data_meeting') {
				item.show = !!user?.enable_dcs && !!SWITCH.dcs
			} else if (item.opt === 'monitor') {
				item.show = !!user?.enable_venue_monitor && !!SWITCH.monitor
			} else if (item.opt === 'mt_record') {
				if (user) {
					if (
						(!user.enable_live && !user.enable_video) ||
						(!SWITCH.vrs.video && !SWITCH.vrs.live) ||
						mccInfo.encryptionType === 4
					) {
						//无直播和录像权限 SM1加密
					} else if (user.enable_live && SWITCH.vrs.live && (!SWITCH.vrs.video || !user.enable_video)) {
						//有直播无录像权限
					} else if ((!user.enable_live || !SWITCH.vrs.live) && SWITCH.vrs.video && user.enable_video) {
						item.show = true
					} else {
						item.show = true
					}
				}
			} else if (item.opt === 'ai') {
				item.show = !!(serverInfo?.enable_kis && user?.enable_kis) && !!SWITCH.kis.ai
			} else if (item.opt === 'file_manage') {
				item.show = !!SWITCH.meetingSpace
			} else {
				item.show = true
			}
		}
		return common
	}
	return (
		<StyledWrap>
			<div id="mcc-split" className="split-line">
				{!isSfu && <IconDrawer collapsed={collapsed} onClick={() => handleCollapsed()} />}
			</div>
			<div className="right-content">
				{addSfuStyle && <div className="sfu-title">{t('会议控制')}</div>}
				{curPage !== 'mt_camera' && curPage !== 'mt_info' && !isSfu && (
					<Tab
						className="right-tab"
						type="button"
						data={[
							{
								label: t('常用'),
								value: 'common',
								disabled: false,
							},
							{
								label: t('高级'),
								value: 'especial',
								disabled: false,
							},
						]}
						value={tab}
						onChange={(e, v, c) => {
							useParamsStore.getState().hideActionButton()
							useMccStore.getState().setCurPage('mcc_main')
							setTab(v)
						}}
					/>
				)}
				<div className="right-body">
					{/* 电视墙是弹框*/}
					{(curPage === 'mcc_main' || curPage === 'tvwall') && (
						<>
							<ul className={isSfu ? 'sfu menu-ul' : 'menu-ul'}>
								{tab === 'common' && menu[tab].every((item) => !item.show) ? (
									loading ? (
										<></>
									) : (
										<MenuNoItemTip />
									)
								) : (
									menu[tab].map(
										(x) => x.show && <React.Fragment key={x.opt}>{x.render}</React.Fragment>
									)
								)}
							</ul>
							<ul className={isSfu ? 'sfu setting-ul' : 'setting-ul'}>
								<MenuSettingMeeting></MenuSettingMeeting>
								<MenuDelayMeeting></MenuDelayMeeting>
								<MenuEndMeeting></MenuEndMeeting>
							</ul>
						</>
					)}
					<SlideInOut show={curPage === 'mt_info'}>
						<MccMtInfoView />
					</SlideInOut>
					<SlideInOut show={curPage === 'vip'}>
						<Vip />
					</SlideInOut>
					<SlideInOut show={curPage === 'mt_camera'}>
						<CameraRc />
					</SlideInOut>
					<SlideInOut show={curPage === 'msg'}>
						<Sms />
					</SlideInOut>
					<SlideInOut show={curPage === 'recall'}>
						<Chasing />
					</SlideInOut>
					<SlideInOut show={curPage === 'meeting_poll'}>
						<Poll />
					</SlideInOut>
					<SlideInOut show={curPage === 'chairman_poll'}>
						<Poll />
					</SlideInOut>
					<SlideInOut show={curPage === 'upload'}>
						<Poll />
					</SlideInOut>
					<SlideInOut show={curPage === 'mt_record'}>
						<MccMtVideoView />
					</SlideInOut>
					<SlideInOut show={curPage === 'ai'}>
						<Ai />
					</SlideInOut>
					<SlideInOut show={curPage === 'meeting_video'}>
						<PlayVideo />
					</SlideInOut>
					<SlideInOut show={curPage === 'video_live'}>
						<LiveVideo />
					</SlideInOut>
					<SlideInOut show={curPage === 'mix'}>
						<Mix />
					</SlideInOut>
					<SlideInOut show={curPage === 'mt_select'}>
						<MtSelect />
					</SlideInOut>
					<SlideInOut show={curPage === 'rollcall'}>
						<Roll />
					</SlideInOut>
				</div>
			</div>
			<VoiceInspire />
			<Main />
			<Tvwall />
			{/* 会议信息设置 */}
			<MeetingInfoSet></MeetingInfoSet>
			{/* 延长会议 */}
			<DelayMeeting />
		</StyledWrap>
	)
}
export default RightAction
